import {Button, Link, Popup, Tag} from 'tdesign-react';
import {QrcodeIcon,} from 'tdesign-icons-react';

import UpgradeIcon from './assets/upgrade.svg'
import HideIcon from './assets/hide.svg'
import LogoutIcon from './assets/logout.svg'

const shortcutsMac = [
  {label: '局部截图开始结束：', shortcut: 'Option + Shift + D'},
  {label: '局部截图开始结束：', shortcut: '鼠标三击'},
  {label: '局部截图开始结束：', shortcut: 'Option + 鼠标双击'},
  {label: '局部截长图加图：', shortcut: 'Option + Shift + W'},
  {label: '局部截长图回答：', shortcut: 'Option + Shift + E'},
  {label: '选择题型快捷键：', shortcut: 'Option + Shift + 方向键上/下'},
  {label: '手机翻页快捷键：', shortcut: 'Option + Shift + 方向键左/右'},
  {label: '重推答案快捷键：', shortcut: 'Option + Shift + Q'},
  {label: '停止播放答案快捷键：', shortcut: 'Option + Shift + T'},
  {label: '窗口截图快捷键：', shortcut: 'Option + Shift + 空格'},
  {label: '显示窗口快捷键：', shortcut: 'Command + Shift + Option + L'}
];
const shortcutsWin = [
  {label: '局部截图开始结束：', shortcut: 'Alt + Shift + D'},
  {label: '局部截图开始结束：', shortcut: '鼠标三击'},
  {label: '局部截图开始结束：', shortcut: 'Alt + 鼠标双击'},
  {label: '局部截长图加图：', shortcut: 'Alt + Shift + W'},
  {label: '局部截长图回答：', shortcut: 'Alt + Shift + E'},
  {label: '选择题型快捷键：', shortcut: 'Alt + Shift + 方向键上/下'},
  {label: '手机翻页快捷键：', shortcut: 'Alt + Shift + 方向键左/右'},
  {label: '重推答案快捷键：', shortcut: 'Alt + Shift + Q'},
  {label: '停止播放答案快捷键：', shortcut: 'Alt + Shift + T'},
  {label: '窗口截图快捷键：', shortcut: 'Ctrl + Shift + 空格'},
  {label: '显示窗口快捷键：', shortcut: 'Ctrl + Shift + Alt + L'}
];

export default function Shortcut() {
  const shortcuts = window.platform === 'win32' ? shortcutsWin : shortcutsMac
  return (
    <div className="bg-[#F5F6F7] py-6 h-screen w-screen flex flex-col items-center justify-center font-sans">
      <div className="w-[470px] bg-[#f8f8f8] rounded-lg shadow-sm px-5 py-2 pb-4 flex flex-col">

        <div className="flex-grow gap-y-4">
          {shortcuts.map((shortcut, index) => (
            <div key={index} className="flex justify-between items-center py-2">
              <span className="text-sm text-gray-700">{shortcut.label}</span>
              <Tag
                className="bg-[rgba(62,70,84,0.09)] text-gray-900 !px-3 !py-1 !text-sm !font-mono !rounded-md"
              >
                {shortcut.shortcut}
              </Tag>
            </div>
          ))}
        </div>

        <div className="bg-[#EAF3FF] border border-[#96BDFF] rounded-md mt-2 p-2 text-sm text-gray-900">
          所有局部操作需在题目区域的
          <Popup showArrow placement="top"
                 content={(<img className="w-[480px] p-1" src='/public/guide.png'/>)}>
            <span className="text-blue-500">左上角(A点)和右下角(B点)</span>
          </Popup>

          分别按对应快捷键完成，具体操作详见
          <Link theme="primary" href="#" className="ml-1">截图教程</Link>
        </div>
      </div>

      <div className="w-[470px] grid grid-cols-4 gap-x-3 my-4.5">
        <Button className="w-[104px] !h-[36px] bg-linear-to-b from-[#DF84FF] to-[#9B3EFE] !border-none">
          <img src={UpgradeIcon}/> <span className="ml-1">升级套餐</span>
        </Button>
        <Button className="w-[104px] !h-[36px] bg-linear-to-b from-[#FFB96B] to-[#FF771F] !border-none">
          <QrcodeIcon/> <span className="ml-1">二维码</span>
        </Button>
        <Button className="w-[104px] !h-[36px] bg-linear-to-b from-[#5FA9FF] to-[#0050FF] !border-none">
          <img src={HideIcon}/> <span className="ml-1">隐藏界面</span>
        </Button>
        <Button className="w-[104px] !h-[36px] bg-linear-to-b from-[#F56F84] to-[#E73C4C] !border-none">
          <img src={LogoutIcon}/> <span className="ml-1">退出登录</span>
        </Button>
      </div>

      <div className="flex justify-center items-center gap-6 text-sm">
        <Link theme="primary" href="#">截图教程</Link>
        <Link theme="primary" href="#">使用教程</Link>
      </div>
    </div>
  );
}